import { Component, PropsWithChildren } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image, Button } from '@tarojs/components'
import { AtButton } from 'taro-ui'

import "taro-ui/dist/style/components/button.scss" // 按需引入
import './index.scss'
import { getCurrentInstance } from '@tarojs/runtime'

const imgSrc='https://img1.baidu.com/it/u=3240581196,2174000662&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=540';

interface IState {
  width: string
  height: string
}

export default class index extends Component {
  constructor(props: any) {
    super(props)
    this.state = {
      width: '',
      heigth: ''
    }
  }

  componentDidMount() {
    Taro.getSystemInfo({
      success: (res) => {
        this.setState({
          width: res.windowWidth + 'px',
          height: res.windowHeight + 'px'
        })
      }
    })
  }

  go2Home = () => {
    Taro.navigateBack()
  }

  onAddToFavorites (res) {
    // webview 页面返回 webviewUrl
    console.log('WebviewUrl: ', res?.webviewUrl)
    return {
      title: '自定义收藏',
      imageUrl: imgSrc,
      query: 'id?=1',
    }
  }
  onShareTimeline() {
    console.log('onShareTimeline')
    return {
      title: '分享到我的朋友圈',
      imageUrl: imgSrc,
      path: '/pages/detail/index?id=123',
    }
  }
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '分享给好友的内容',
      imageUrl: imgSrc,
      path: '/pages/detail/index?id=123',
    }
  }
  render () {
    return (
      <View className='index'>
        {
          <View>
            <Image mode='aspectFill' style={{ width: this.state.width, height: this.state.height}} src={imgSrc} ></Image>
            <View id='btn-list'>
              <Button plain className='btn' onClick={this.go2Home}>
                <View className='at-icon at-icon-chevron-left'></View>
                返回
              </Button>
              <Button plain className='btn'>
                <View className='at-icon at-icon-heart'></View>
                收藏
              </Button>
              <Button plain className='btn' onClick={this.download}>
                <View className='at-icon at-icon-download'></View>
                下载
              </Button>
              <Button openType='share' plain className='btn'>
                <View className='at-icon at-icon-share'></View>
                分享
              </Button>
            </View>
          </View>
        }
      </View>
    )
  }
}
